<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>key的作用</title>
</head>
<body>
  <div id="test"></div>

  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>

  <script type="text/babel">
    /*
      虚拟dom中key的作用：
        1、简单的说：key是虚拟dom对象的标识，在更新显示时key起着极其重要的作用
        2、详细的说：当状态中的数据发生变化时，react会根据【新数据】生产【新的虚拟dom】，
                    随后react进行【新虚拟dom】与【旧虚拟dom】的diff比较，比较规则如下：
                    a. 旧虚拟dom中找到了新虚拟dom相同的key：
                      (1)若虚拟dom中内容没变，直接使用之前的真实dom
                      (2)若虚拟dom中内容变了，则生成新的真实dom，随后替换掉页面中之前的真实dom

                    b.旧虚拟dom中未找到新虚拟dom相同的key
                      根据数据创建新的真实dom，随后渲染到页面
                    
                  
    */
    /*
      慢动作回放 —— 使用index索引值作为Key
        数据：
          { id: 1, name: '小张', age: 18 },
          { id: 2, name: '小李', age: 19 },
        初始虚拟dom:
          <li key=0>小张 --- 18</li>
          <li key=1>小李 --- 19</li>
        更新后的数据：
          { id: 3, name: '小王', age: 17 },
          { id: 1, name: '小张', age: 18 },
          { id: 2, name: '小李', age: 19 },
        更新后的虚拟dom:
          <li key=0>小王 --- 17</li>
          <li key=1>小张 --- 18</li>
          <li key=2>小李 --- 19</li>

    */  
    class Person extends React.Component {
      state = {
        persons: [
          {
            id: 1, name: '小e', age: 10
          },
          {
            id: 2, name: '小h', age: 12
          }
        ]
      }

      add = () => {
        const { persons } = this.state
        const p = { id: persons.length+1, name: '小a', age: 11 }
        this.setState({
          persons: [ p, ...persons ]
        })
      }

      render() {
         return (
          <div>
            <h2>展示人员信息</h2>
            <button onClick={this.add}>添加一个小a</button>
            <ul>
              {
                this.state.persons.map(n => {
                  return <li>{n.name} --- {n.age}</li>
                })
              }
            </ul>  
          </div>
         )
      }
    }
    ReactDOM.render(<Person />, document.getElementById('test'))
  </script>
</body>
</html>